<template>
  <div id="app">
    <loading v-show="loading"></loading>
    <navgetion></navgetion>
    <router-view class="app-template"></router-view>
    <pageFoot></pageFoot>
  </div>
</template>

<script>
import navgetion from "./components/common/navgetion";
import pageFoot from "./components/common/pageFoot";
import loading from "./components/common/loading";
import { mapState } from "vuex";
export default {
  name: "App",
  components: {
    navgetion,
    pageFoot,
    loading,
  },
  data() {
    return {
    };
  },
  created() { },
  mounted() {
    this.handPcWidth();
    window.addEventListener("resize", this.handPcWidth);
  },
  computed: {
    ...mapState(["loading"]),
  },
  watch: {
    "$store.state.screenWidth": function (val) {
      console.log(val);
      //监听屏幕宽度变化
      this.windowWidth = val;
      var html = document.getElementsByTagName("html")[0];
      var oWidth = val;
      // 这里的750是指设计图的大小,自己根据实际情况改变
      if (oWidth > 770) {
        html.style.fontSize = (oWidth / 1920) * 100 + "px";
      } else {
        html.style.fontSize = (oWidth / 1920) * 430 + "px";
      }
      // console.log('rem:', html.style.fontSize);
    },
  },
  methods: {
    // 监听页面宽度变化
    handPcWidth() {
      var html = document.getElementsByTagName("html")[0];
      var oWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
      // 这里的750是指设计图的大小,自己根据实际情况改变
      if (oWidth > 770) {
        // html.style.fontSize = (oWidth / 1920) * 100 + "px";
      } else {
        // html.style.fontSize = (oWidth / 1920) * 430 + "px";
      }
      // console.log(html.style.fontSize)
    },
  },
};
</script>

<style>
#app {
  font-family: Noto Sans SC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* white-space: nowrap;//内容不换行 */
  /* white-space: pre-line;//内容换行 */
}
</style>
